import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Table, Pagination, Popconfirm, Button, Alert } from 'antd';
import moment from 'moment';

import styles from '../table-list.less';

@connect(state => ({
    ${classObjectName}: state.${classObjectName}
}))
export default class ${className}List extends PureComponent{
    // 处理列表单选框事件
    handleRowSelectChange = (selectedRowKeys, selectedRows) => {
        if (this.props.onSelectRow) {
            this.props.onSelectRow(selectedRows,selectedRowKeys);
        }
    };
    // 处理列表取消单选框事件
    cleanSelectedKeys = () => {
        this.handleRowSelectChange([], []);
    };
    // 编辑事件
    handleModalVisible =(id)=>{
        const { dispatch } = this.props;
        // 打开编辑框
        dispatch({type: '${classObjectName}/handleEditModalVisible',payload: {visible:true}});
        // 获取编辑数据
        dispatch({type: '${classObjectName}/detail',payload: {id:id}});
    };

    render(){
        const { page, loading, onPageChange,selectedRowKeys } = this.props;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.handleRowSelectChange,
            getCheckboxProps: record => ({
                disabled: record.disabled,
            }),
        };

        const columns = [
            <#list fields as field>
                <#if field.fieldName != keyName>
                { title: '${field.remarks}', dataIndex: '${field.fieldName}', key: '${field.fieldName}', }<#if field_has_next>,</#if>
                </#if>
            </#list>
            ,{
                title: '操作',
                render: (record) => (
                    <div>
                        <span>
                            <a onClick={()=>this.handleModalVisible(record.id)}>编辑</a>
                        </span>
                    </div>
                ),
            }
        ];

        return (
            <div>
                <div className={styles.standardTable}>
                    <div className={styles.tableAlert}>
                        <Alert
                                message={(
                        <div>
                            已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
                            <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>清空</a>
                        </div>
                        )}
                        type="info"
                        showIcon
                        />
                    </div>
                    <div>
                        <Table rowSelection={rowSelection} columns={columns} dataSource={page.pageData} rowKey={record => record.id} loading={loading} pagination={false}/>
                        <div>
                            <Pagination total={page.total} current={page.pageNum} pageSize={page.pageSize}
                                        onChange={onPageChange} onShowSizeChange={(current,pageSize)=>onPageChange(current,pageSize)}
                                showTotal={(total, range) => `共${r'${total}'} 条数据,当前展示第:${r'${range[0]}'}-${r'${range[1]}'} 条`}
                                showSizeChanger showQuickJumper/>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}